<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>3.6. Personalizando el estilo</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="ch03.html" title="Cap&iacute;tulo 3. Elementos b&aacute;sicos">
      <link rel="prev" href="ch03s05.html" title="3.5. C&oacute;digo de la l&oacute;gica de negocio">
      <link rel="next" href="ch03s07.html" title="3.7. Tratamiento de tipos de datos">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">3.6. Personalizando el estilo</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch03s05.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Cap&iacute;tulo 3. Elementos b&aacute;sicos</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch03s07.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="section" title="3.6. Personalizando el estilo">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title" style="clear: both"><a name="d4e2528"></a>3.6. Personalizando el estilo
                  </h2>
               </div>
            </div>
         </div>
             
         
             
         <p><a name="C3Estilo"></a>El framework suministra un m&eacute;todo para personalizar su
                aspecto y funcionamiento, que en adelante llamaremos 'temas'. Los temas
                est&aacute;n ubicados en la carpeta en <span class="bold"><strong>igep/custom</strong></span>, podemos tener varios temas y activar
                uno en concreto mediante el atributo <span class="bold"><strong>customDirName</strong></span> del fichero gvHidraConfig.inc.xml del
                framework o de la aplicaci&oacute;n, o con el m&eacute;todo <span class="bold"><strong>ConfigFramework-&gt;setCustomDirName</strong></span> (ver <a class="link" href="ch03.html#C3gvHidraConfig">configuraci&oacute;n de
                   gvHidraConfig.xml</a>).
         </p>
         
             
         <p>Con gvHidra vienen tres temas configurados:</p>
         
             
         <div class="itemizedlist">
            <ul class="itemizedlist" type="disc">
               <li class="listitem">
                          
                  <p><span class="bold"><strong>cit.gva.es</strong></span>: es el usado
                             internamente en la Conselleria de Infraestructuras y Transportes. Es
                             el m&aacute;s completo, ya que adem&aacute;s del estilo tambien incluye
                             funcionalidad.
                  </p>
                        
               </li>
               <li class="listitem">
                          
                  <p><span class="bold"><strong>default</strong></span>: es el mismo aspecto
                             que el anterior pero sin funcionalidad extra ni caracter&iacute;sticas
                             propias de la Conselleria.
                  </p>
                        
               </li>
               <li class="listitem">
                          
                  <p><span class="bold"><strong>gvpontis</strong></span>: es el usado en la web
                             <a class="ulink" href="http://www.gvpontis.gva.es/" target="_top">gvpontis</a>, y tampoco
                             incluye funcionalidad extra.
                  </p>
                        
               </li>
            </ul>
         </div>
         
             
         <p>Vamos a pasar a explicar la estructura inicial que debe contener un
                tema.
         </p>
         
             
         <div class="section" title="3.6.1. CSS">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e2548"></a>3.6.1. CSS
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Tendremos un directorio CSS donde tendremos la hoja de estilo a
                     utilizar en nuestra aplicaci&oacute;n (<span class="emphasis"><em>aplicacion.css</em></span>) y
                     otra hoja de estilo para el men&uacute; desplegable
                     (<span class="emphasis"><em>layersmenu-cit.css</em></span>). La hoja de estilo que se
                     aplica al calendario en estos momentos no es personalizable.
            </p>
            
                  
            <p>Para personalizar la hoja de estilo aplicacion.css entendiendo las
                     reglas de estilo que se han definido para gvHidra existe una explicaci&oacute;n
                     detallada de qu&eacute; significa cada una y d&oacute;nde se aplica cada selector en
                     el punto <a class="link" href="ch07s05.html#C7CustomPropio">Creaci&oacute;n de un custom propio del
                        cap&iacute;tulo 7</a>.
            </p>
                
         </div>
         
             
         <div class="section" title="3.6.2. Im&aacute;genes">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e2555"></a>3.6.2. Im&aacute;genes
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>En el directorio im&aacute;genes tenemos una estructura de carpetas que
                     hay que respetar, a la vez que tambi&eacute;n hay que respetar los nombres de
                     los fichero, ya que el framework buscar&aacute; en esa ruta y con ese
                     nombre.
            </p>
            
                  
            <p>Explicaci&oacute;n de la estructura de directorios:</p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>acciones</strong></span>: Im&aacute;genes para los
                                  CWBoton y las flechas de ordenaci&oacute;n en un CWTabla (14.gif y
                                  16.gif).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>arbol</strong></span>: Im&aacute;genes que se
                                  utilizan cuando trabajemos con el patr&oacute;n &aacute;rbol.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>avisos</strong></span>: Im&aacute;genes que se
                                  utilizan para los diferentes mensajes que utiliza el framework
                                  (avisos, sugerencias, errores...)
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>botones</strong></span>: Im&aacute;genes de los
                                  botones tooltip. Existen dos im&aacute;genes por cada bot&oacute;n, uno con la
                                  imagen en color para cuando el bot&oacute;n est&aacute; activo y otra para el
                                  estado inactivo, estos llevan el sufijo "off".
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>listados</strong></span>: Logo para
                                  listados.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>logos</strong></span>: Im&aacute;genes para los
                                  logos de la pantalla principal y men&uacute; desplegable de la barra
                                  superior.
                     </p>
                     
                               
                     <p>"logo.gif": Logo que aparece al final de la pantalla de
                                  entrada.
                     </p>
                     
                               
                     <p>"logoMenu.gif": Logo del men&uacute; de la barra superior de las
                                  pantallas.
                     </p>
                     
                               
                     <p>"logoSuperior.gif": Logo de fondo en la pantalla de
                                  entrada.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>menu</strong></span>: Im&aacute;genes para los men&uacute;s
                                  de la pantalla principal.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>paginacion</strong></span>: Im&aacute;genes para los
                                  botones de la paginaci&oacute;n.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>pestanyas</strong></span>: Im&aacute;genes para las
                                  pesta&ntilde;as de los modos de trabajo.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>tablas</strong></span>: Im&aacute;genes que se
                                  utilizan en tablas. Actualmente tenemos la imagen que nos servir&aacute;
                                  para marcar la l&iacute;nea de separaci&oacute;n de la cabecera en las
                                  tablas.
                     </p>
                             
                  </li>
               </ul>
            </div>
                
         </div>
         
             
         <div class="section" title="3.6.3. Ficheros de configuraci&oacute;n del custom">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e2593"></a>3.6.3. Ficheros de configuraci&oacute;n del custom
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Tenemos cuatro ficheros que nos permitir&aacute;n una configuraci&oacute;n del
                     custom que sobreescribir&aacute; la propia del framework, pero, que a la vez
                     estar&aacute; por debajo de la configuraci&oacute;n de cada aplicaci&oacute;n:
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>include.php</strong></span>: fichero donde se
                                  deben incluir las clases propias del custom. Pueden ser
                                  clasesManejadoras (directorio actions), tipos (directorio types),
                                  clases de negocio (directorio class), ...
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>CustomMapping.php</strong></span>: define los
                                  mappings propios del custom.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>gvHidraConfig.inc.xml</strong></span>: define
                                  la configuraci&oacute;n est&aacute;tica del custom.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>CustomMainWindow</strong></span>: define la
                                  configuraci&oacute;n din&aacute;mica del custom.
                     </p>
                             
                  </li>
               </ul>
            </div>
                
         </div>
           
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch03s05.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="ch03.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch03s07.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">3.5. C&oacute;digo de la l&oacute;gica de negocio&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;3.7. Tratamiento de tipos de datos</td>
            </tr>
         </table>
      </div>
   </body>
</html>